<%@ page pageEncoding="UTF-8"%>
<%@ include file="/common/validate.jsp"%>
<%@ include file="../function.jsp"%>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>天下布医</title>
    <link  href="/images/favicon.ico" rel="shortcut icon" type="image/x-icon">
    <link rel="stylesheet" href="/css/jquery.selectlist.css?cache=<%=Math.random()%>">
    <link rel="stylesheet" href="/css/public.css?cache=<%=Math.random()%>" >
    <link rel="stylesheet" href="/css/messages_doctor_mes.css?cache=<%=Math.random()%>">
    <link rel="stylesheet" href="../layui/css/layui.css?cache=<%=Math.random()%>">
    <link rel="stylesheet" href="../demo/loading.css">
    <link href="http://cdn.gbtags.com/twitter-bootstrap/3.2.0/css/bootstrap.css" rel="stylesheet">
    <link href="http://cdn.bootcss.com/summernote/0.8.2/summernote.css" rel="stylesheet">
    <script src="/js/jquery-3.2.1.min.js"></script>
    <script src="../demo/loading.js"></script>
    <script src="../demo/resize.min.js"></script>
    <!--富文本编辑器需要依赖以下的外部文件-->
    <script src="/js/bootstrap.min.js"></script>
    <script src="../demo/summernote.js"></script>
    <script src="http://cdn.bootcss.com/summernote/0.7.1/lang/summernote-zh-CN.min.js"></script>
    <!--end-->

    <style>
        body {
            background-color: #F1F2F7!important;
        }
        a {
            color: #646464;

        }
        a:hover {
            text-decoration: none;
            color: #646464;
        }
        .my-box span {
            display: inline-block;;
            width: 60px!important;
            font-size: 18px;
        }
        .my-box em {
            color: red;
        }
        .my-box>div {
            margin-top: 30px;
        }
        .my-box input,
        .my-box textarea {
            width: 600px;
            padding: 10px;
        }
        .my-box textarea {
            vertical-align: top;
        }
        .submit {
            display: inline-block;
            padding: 6px 10px;
            font-size: 18px;
            background-color: #68cacb;
            color: #fff;
            border-radius: 5px;
            margin-left: 300px;
            cursor: pointer;
        }
        .right_cont_container {
            padding: 20px;
        }
        .kingeditor {
            width: 600px;
            margin-top: 30px;
        }
        .note-editor {
            top: -27px;
            left: 63px;
        }
        .modal-body .note-image-input,
        .modal-body .note-image-url{
            width: 566px!important;
            height: 47px;
        }
        .title-row img {
            width: 20px!important;
            padding: 0 4px;
        }
    </style>
</head>
<body>
<%@ include file="/header.jsp"%>
<!--内容-->
<div class="containerone">
    <%@ include file="/left_menu.jsp"%>
    <!--右边内容-->
    <div class="right_cont">
        <div class="message_hos_news_container">
            <!--右边导航下面内容-->
            <div class="right_cont_container">
                <div id="app">
                    <div class="title-row">
                        <span>住院通</span>
                        <span><img src="../img/title-next.png"></span>
                        <span>健康教育</span>
                        <span><img src="../img/title-next.png"></span>
                        <span>修改新闻</span>
                    </div>
                    <div class="content">
                        <div class="my-box">
                            <div class="title">
                                <span>标题<em>*</em></span>
                                <input type="text" v-model="title">
                            </div>
                            <div class="abstract">
                                <span>摘要</span>
                                <textarea v-model="summary"></textarea>
                            </div>
                            <div class="author">
                                <span>作者<em>*</em></span>
                                <input type="text" v-model="author">
                            </div>
                        </div>
                        <div class="kingeditor">
                            <span style="font-size: 18px">内容<em style="color:red">*</em></span>
                            <div id="editor"></div>
                        </div>
                    </div>
                    <div class="submit" @click="submit()">
                        确认修改
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>
<script src="../js/vue.js"></script>
<script src="../layui/layui.js"></script>
<script>
    var vm = new Vue({
        el: "#app",
        data: {
            catagory: 0,
            title: "",
            summary: "",
            author: "",
        },
        ready : function () {
            var _this = this;
            _this.catagory = location.search.substr(4);
            $('#editor').summernote({
                lang: 'zh-CN',
                height: 400
            });
            $("body").on("change", ".note-image-input", function(event){
                var files = event.target.files ;
                window.tempfiles = files ;
                for(var i=0;i<files.length;i++){
                    if(files[i].size>1024*1024*5){            //改了富文本插件的3111行
                        this.danger("图片大小不能超过5M!")
                    }
                }
            }.bind(this));
            $.ajax({
                type: 'POST',
                url: "edit.jsp",
                data: {
                    act: "news",
                    hospital: "1111",
                    news_id: _this.catagory,
                },
                success: function (res) {

                    res =  JSON.parse(res);
                    //console.log(res);
                    if(res.errcode == 0) {
                        _this.title = res.data.title;
                        _this.summary = res.data.summary;
                        _this.author = res.data.author;
                        var imgs = JSON.parse(res.data.img) ;
                        var content = res.data.html ;
                        imgs.forEach(function (item) {
                            content = content.replace(item.ref,"<img style='"+item.style+"' src='"+item.src+"'>") ;
                        })
                        $('.note-editable').html(content) ;
                    } else {
                        layer.open({
                            title: '提示',
                            content: res.errmsg
                        })
                    }
                }
            })
        },
        methods: {
            submit: function() {
                var _this = this;
                var content = $('.note-editable').html();
                //console.log(content);
                //console.log(_this.catagory);
                if($.trim(_this.title) == "") {
                    layer.open({
                        title: '提示',
                        content: '标题不能为空!'
                    })
                } else if($.trim(_this.title).length > 100){
                    layer.open({
                        title: '提示',
                        content: '标题不能超过100个字!'
                    })
                } else if($.trim(_this.summary).length > 200) {
                    layer.open({
                        title: '提示',
                        content: '摘要不能超过200个字!'
                    })
                } else if($.trim(_this.author) == "") {
                    layer.open({
                        title: '提示',
                        content: '作者不能为空!'
                    })
                } else if($.trim(_this.author).length > 100) {
                    layer.open({
                        title: '提示',
                        content: '作者不能超过100个字!'
                    })
                } else if (/^(<p>(<br>)*|(&nbsp;\s*)*<\/p>)*$/.test(content)) {
                    layer.open({
                        title: '提示',
                        content: '内容不能为空!'
                    })
                } else if($.trim(content).length > 100000000) {
                    layer.open({
                        title: '提示',
                        content: '上传字数过多，请您在删减之后再做上传！'
                    })
                } else if(content.indexOf('file:///')!=-1) {
                    layer.open({
                        title: '提示',
                        content: '图片必须点击上传按钮'
                    })
                } else {
                    eeesysLoading();
                    $.ajax({
                        type: 'POST',
                        url: 'edit.jsp',
                        data: {
                            act: "update_news",
                            hospital: "1111",
                            news_id: _this.catagory,
                            title: _this.title,
                            summary: _this.summary,
                            author: _this.author,
                            content: content,
                        },
                        success: function (res) {
                            eeesysLoadingCancel();
                            console.log(res);
                            res = JSON.parse(res);
                            if(res.errcode == 0) {
                                layer.open({
                                    title: '提示',
                                    content: '修改成功!',
                                    yes: function(index, layero) {
                                        layer.close(index);
                                        history.go(-1);
                                    }
                                })
                            } else {
                                layer.open({
                                    title: '提示',
                                    content: res.errmsg
                                })
                            }
                        }
                    })
                }
            }
        },
    })
    layui.use('layer', function(){
        var layer = layui.layer;
    })
</script>
</html>